<template>
    <div class="echartLayout">
        <div id="container" style="width:100%; height:100%; overflow:hidden;"></div>
    </div>
</template>

<script>
import echarts from "echarts";
import {demo2} from  "./demo2.js"

export default {
  data() {
    return {
      webkitDep: demo2
    };
  },
  created() {},
  methods: {
    drawing() {
      this.addNodes();
      const myChart = echarts.init(document.getElementById("container"));
      var option = {
        title: {
          text: "视图简介：企业关系谱",
          x: "right",
          y: "bottom"
        },
        toolbox: {
            show : true,
            feature : {
                restore : {show: true},
                magicType: {show: true, type: ['force', 'chord']},
                saveAsImage : {show: true}
            }
        },
        noDataEffect: 'none',
        legend: {
          //表头控件
          show: true,
          data: [
            { name: "企业关系", icon: "rect" }, //icon : 'rect'//'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
            { name: "银行关系", icon: "triangle" },
            { name: "合作关系", icon: "pin" }
          ] //此处的数据必须和关系网类别中name相对应
        },
        tooltip: {
          show: true, //默认显示
          showContent: true, //是否显示提示框浮层
          trigger: "item", //触发类型，默认数据项触发
          triggerOn: "mousemove", //提示触发条件，mousemove鼠标移至触发，还有click点击触发
          alwaysShowContent: false, //默认离开提示框区域隐藏，true为一直显示
          showDelay: 0, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
          hideDelay: 200, //浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
          enterable: false, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
          position: "right", //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
          confine: false, //是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
          transitionDuration: 0.4, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
          formatter: function(params, ticket, callback) {
          }
        },
        series: [
          {
            type: "graph",
            layout: "force",
            animation: false,
            label: {
              normal: {
                show: true,
                position: "top"
              }
            },
            legendHoverLink : true,//是否启用图例 hover(悬停) 时的联动高亮。
            hoverAnimation : true,//是否开启鼠标悬停节点的显示动画
            coordinateSystem : null,//坐标系可选
            xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
            yAxisIndex : 0, //y轴坐标 
            edgeSymbol: ['none', 'arrow'],
            roam : true,//是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            nodeScaleRatio : 0.6,//鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
            draggable : true,//节点是否可拖拽，只在使用力引导布局的时候有用。
            edgeSymbolSize: 10, //边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
            minRadius: 5,
            maxRadius: 8,
            gravity: 1.1,
            scaling: 1.1,
            steps: 10,
            large: true,
            useWorker: true,
            coolDown: 0.995,
            ribbonType: false,
            lineStyle: {
              //==========关系边的公用线条样式。
              normal: {
                color: "rgba(222,0,23,0.4)",
                width: "1",
                type: "dashed", //线的类型 'solid'（实线）'dashed'（虚线）'dotted'（点线）
                curveness: 0.2, //线条的曲线程度，从0到1
                opacity: 1
                // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
              },
              emphasis: {
                //高亮状态
              }
            },
            data: this.webkitDep.nodes.map(function(node, idx) {
              node.id = idx;
              node.itemStyle = {
                normal: {
                  //默认样式
                  label: {
                    show: true
                  },
                  borderType: "solid", //图形描边类型，默认为实线，支持 'solid'（实线）, 'dashed'(虚线), 'dotted'（点线）。
                  borderColor: "rgba(120,215,0,0.4)", //设置图形边框为淡金色,透明度为0.4
                  borderWidth: 2, //图形的描边线宽。为 0 时无描边。
                  opacity: 1
                  // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。默认0.5
                },
                emphasis: {
                  //高亮状态
                }
              };
              node.label = {
                normal: {
                  show: true,
                  position: "outside", //标签的位置。['50%', '50%'] [x,y]
                  textStyle: {
                    //标签的字体样式
                    color: "#873", //字体颜色
                    fontStyle: "normal", //文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                    fontWeight: "bolder", //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200
                    fontFamily: "sans-serif", //文字的字体系列
                    fontSize: 10 //字体大小
                  }
                }
              };
              return node;
            }),
            categories: this.webkitDep.categories,
            focusNodeAdjacency: true, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
            force: {
              //力引导图基本配置
              initLayout: "", //力引导的初始化布局，默认使用xy轴的标点
              repulsion: 20, //节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
              gravity: 0.01, //节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
              edgeLength: [50,80], //边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
              layoutAnimation: true
              //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。
            },
            edges: this.webkitDep.links
          }
        ]
      };
      myChart.setOption(option);
      this.myChart = myChart;
      this.option = option
    },
    addNodes() {
      // for (var index = 0; index < 20; index++) {
      //   var n = Math.floor(Math.random() * 3);
      //   var m = Math.floor(Math.random() * index);
      //   var element = {
      //     name: "节点" + index,
      //     symbolSize: 10,
      //     level: 3,
      //     category: n
      //   };
      //   var linkitem = {
      //     source: 10 + index,
      //     target: m
      //   };
      //   this.webkitDep.links.push(linkitem);
      //   this.webkitDep.nodes.push(element);
      // }
    }
  },
  computed: {},
  components: {},
  mounted() {
    this.drawing();
  }
};
</script>

<style lang='less' scoped >
.echartLayout {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
</style>
